<template>
  <el-dialog :title="title" :visible.sync="dialogShow" @close="closeHandler">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="200px"
      :inline="false"
      size="normal"
    >
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>

      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" />
      </el-form-item>

      <el-form-item label="权限描述">
        <el-input v-model="formData.description" />
      </el-form-item>

      <el-form-item label="开启">
        <el-switch v-model="formData.enVisible" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="onSubmit"
        >提交</el-button>
        <el-button size="small" @click="dialogShow = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { addPermission, updatePermission } from '@/api/permission'
const defaultFormData = {
  enVisible: '',
  name: '',
  code: '',
  description: '',
  type: '', // 权限的类型 1菜单  2 按钮
  pid: '' // 上级ID， 顶级是 0
}
export default {
  name: 'AddForm',
  data() {
    return {
      // 弹框控制变量
      dialogShow: false,
      // 表单数据变量
      formData: { ...defaultFormData },
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        code: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改权限' : '添加权限'
    }
  },
  created() {},
  methods: {
    // 提交行为
    async onSubmit() {
      await this.$refs.form.validate() // 表单的校验(校验的单独模块)
      // 请求的发生,如果Id相同就是修改,不同就是添加
      if (this.formData.id) {
        await updatePermission(this.formData)
        this.$message.success('修改数据成功')
      } else {
        await addPermission(this.formData)
        this.$messagethis.success('添加数据成功')
      }

      this.$emit('updateList') // 列表更新
      this.dialogShow = false // 关闭
    },
    // 关闭de行为
    closeHandler() {
      this.formData = { ...defaultFormData } // 重置数据
      this.$refs.form.clearValidate() // 重置表单校验
    }
  }
}
</script>
<style></style>
